<!--
  * @Author: ws
  * @Date: 2024-01-05 16:40:08
  * @email: 458658538@qq.com
  * @LastEditors: ws
  * @LastEditTime: 2024-01-12 18:03:10
  * @Description:
-->
<template>
  <el-form ref="formRef" :inline="true" :model="innerValue" class="form-inline" size="small" @submit.native.prevent>
    <template v-for="item in option">
      <el-form-item
        v-if="!item.hidden"
        :key="item.key"
        class="w-[150px]"
        :label="item.label"
        :prop="item.key"
        v-bind="item.itemProps"
        :class="item.class"
      >
        <slot v-if="item.component === 'slot'" :name="item.slotName"></slot>
        <template v-else-if="item.component == 'TRangePicker'">
          <TRangePicker
            v-model="innerValue[item.key]"
            class="common-query-form-item-width-lg"
            :placeholder="item.placeholder"
            :format="item.format"
            :valueFormat="item.valueFormat"
            @ok="onSubmit"
            @change="Array.isArray(innerValue[item.key]) && innerValue[item.key].length == 0 && onSubmit()"
          />
        </template>
        <template v-else-if="item.component == 'dic-select'">
          <el-select
            v-model="innerValue[item.key]"
            class=""
            clearable
            v-bind="item.props"
            v-on="item.listeners"
            @change="onSubmit"
          >
            <el-option
              v-for="option in $store.state.data.OPTION_MAP[item.dicKey] || item.data"
              :key="option.value"
              :label="option.label"
              :value="item.useLabel ? option.label : option.value"
            >
            </el-option>
          </el-select>
        </template>
        <div v-else-if="item.component === 'innerText'" :class="item.innerClass" :style="item.style">
          {{ item.innerText || innerValue[item.key] }}
        </div>
        <template v-else>
          <div class="">
            <component
              :is="item.component"
              v-model="innerValue[item.key]"
              style="flex: 1; width: 100%"
              v-bind="item.props"
              v-on="item.listeners"
              @change="onSubmit"
            >
              <template v-if="item.component === 'el-radio-group'">
                <el-radio
                  v-for="(radio, radioIndex) in item.data"
                  :key="radioIndex"
                  style="margin-top: 10px"
                  :label="radio.value"
                  :disabled="radio.disabled"
                >
                  {{ radio.label }}
                </el-radio>
              </template>

              <template v-if="item.component === 'el-checkbox-group'">
                <el-checkbox
                  v-for="(checkbox, checkboxIndex) in item.data"
                  :key="checkboxIndex"
                  :label="checkbox.value"
                >
                  {{ checkbox.label }}
                </el-checkbox>
              </template>

              <template v-if="item.component === 'el-select'">
                <el-option
                  v-for="(option, optionIndex) in item.data"
                  :key="optionIndex"
                  :label="option.label"
                  :value="option.value"
                ></el-option>
              </template>
            </component>
            <div v-if="item.after" :class="`${item.name}_after`">
              {{ item.after }}
            </div>
          </div>
          <div v-if="item.tips" :class="`${item.name}_tip`" v-html="item.tips"></div>
        </template>
      </el-form-item>
    </template>
    <el-form-item>
      <el-button type="primary" class="common-search-btn" @click="onSubmit">查 询</el-button>
      <el-button class="common-search-btn" @click="resetForm('ruleForm')">重 置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import vModelMixin from "@/mixin/v-model";
export default {
  name: "ComonQueryForm",
  mixins: [vModelMixin],
  props: { option: { type: Array, default: () => [] } },
  data() {
    return {
      formModel: {},
    };
  },
  watch: {},
  mounted() {},

  methods: {
    onSubmit() {
      this.$emit("query");
    },
    resetForm(formName) {
      this.$refs.formRef.resetFields();
      this.$emit("query");
    },
  },
};
</script>

<style scoped lang="scss">
.el-form {
  ::v-deep .el-form-item {
    .el-form-item__content {
      width: 100%;
    }
  }
}
</style>
